<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <FlightsFilters
          @setDataList="setDataList"
          v-if="flightsData.options"
          :data="flightsData"
        />

        <!-- 航班头部布局 -->
        <FlightsListHeader />

        <!-- 航班信息 -->
        <div class="list" v-if="dataList.length > 0">
          <FlightsItem
            v-for="(value, index) in dataList"
            :key="index"
            :data="value"
            @click.native="showFligth(index)"
            :isShow="index == currentAcyy"
          />
        </div>
        <div v-else>暂时没有数据</div>
        <!-- 分页结构 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredList.length"
          :page-size="pageSize"
          :current-page="pageIndex"
        >
        </el-pagination>
      </div>

      <!-- 侧边栏 -->
      <FlightsAside />
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentAcyy: null,
      // 航班数据
      flightsData: {},
      // 多一个数组存放帅选过后的数据
      filteredList: [],
      pageIndex: 1, // 当前页码
      pageSize: 5, //  页码条数
    };
  },
  watch: {
    // 监听路由的变换  如果一旦有变化就重新加载页面
    $route() {
      this.loaPage();
      this.pageIndex = 1;
    },
  },
  // 计算属性
  computed: {
    dataList() {
      // 计算属性是已进入页面就执行，获取数据.then 后执行
      // 判断如果有数据没有数据就返回一个空的数组
      if (!this.filteredList) {
        return [];
      }
      // 把数据赋值给一个新的计算页码的变量 使用slice方法 返回指定的元素
      // slice(start,end) slice有两个参数 stand 规定是从开始选取的  end 规定是从结束选取的
      const stand = (this.pageIndex - 1) * this.pageSize;
      // 结束的位置使用当前页码 加上当前的条数
      const end = stand + this.pageSize;
      return this.filteredList.slice(stand, end);
    },
  },
  methods: {
    // 封装的请求机票列表数据
    loaPage() {
      this.$axios({
        url: "/airs",
        params: this.$route.query,
      }).then((res) => {
        console.log(res.data);
        this.flightsData = res.data;
        // console.log(this.flightsData);
        // 用来刷选使用的
        this.filteredList = [...this.flightsData.flights];
      });
    },
    // 处理点击机票的展开
    showFligth(index) {
      // index 是当前点击传过来的的航班
      if (this.currentAcyy == index) {
        this.currentAcyy = null;
      } else {
        this.currentAcyy = index;
      }
    },
    // 点击每条页码是触发
    handleSizeChange(val) {
      this.pageSize = val;
    },

    // 点击当前页是触发
    handleCurrentChange(val) {
      this.pageIndex = val;
    },
    setDataList(list) {
      this.filteredList = list;
    },
  },
  mounted() {
    // 机票列表的渲染
    this.loaPage();
  },
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>